<template>
  <div class="good-list">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <div>商品列表</div>
      <div class="searchBox">
        <el-form ref="form" label-width="80px">
         <el-form-item label="商品:">
          <el-input v-model="searchName" placeholder="商品编号/商品名称" @change='params.pagenum = 1'></el-input>
          <span style="margin-left:30px"> 商品类别</span>
           <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in seletGoodsName"
                :key="item.id"
                :label="item.type"
                :value="item.id">
              </el-option>
            </el-select>
          <el-button type="primary" size='small' class="search" @click="searchGoods">搜素</el-button>
          <el-button type="warning" size='small' @click="resetGoodsList">重置</el-button>
        </el-form-item>
        </el-form>
      </div>
       <div class="btns">
           <button class="addBtn" @click="addgoods">新增商品</button>
        </div>
        <!-- 商品列表 -->
        <div  class="coupon-table">
          <el-table
      :data="goodList"
      style="width: 100%"
      >
      <el-table-column
        prop="goods_number"
        label="商品编号"
        width="88"
        >
      </el-table-column>
       <el-table-column
        prop="goods_name.name"
        label="商品名称"
        width="108"
        >
      </el-table-column>
      <el-table-column
        prop="goods_name.type"
        label="商品类型"
        width="88">
      </el-table-column>
        <el-table-column
        prop="goods_roucaicbprice"
        label="成本价"
        width="70">
      </el-table-column>
      <el-table-column
        prop="goods_roucaisprice"
        sortable
        width="90">
          <i slot="header">销售价 <i class="el-icon-sort"></i></i>
      </el-table-column>
      <el-table-column
        prop="goods_yxiaoliang"
        sortable
        width="90">
        <i slot="header">月销量 <i class="el-icon-sort"></i></i>
      </el-table-column>
       <el-table-column
        prop="goods_kucun"
        label="库存"
        width="60">
      </el-table-column>
      <el-table-column
        prop="goods_zxiaoliang"
        sortable
        width="90">
        <i slot="header">总销售 <i class="el-icon-sort"></i></i>
      </el-table-column>
      <el-table-column
        prop="goods_zxiaoliangee"
        width="110"
        sortable
        >
        <i slot="header">总销售额 <i class="el-icon-sort"></i></i>
      </el-table-column>
      <el-table-column
        prop="canyu_active"
        label="参与活动"
        width="90">
      </el-table-column>
      <el-table-column
        prop="rxboolean"
        label="热销"
        width="50">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="66">
      </el-table-column>
        <el-table-column
        label="操作">
         <template slot-scope="scope">
                 <el-button size="mini" type="primary" icon="el-icon-edit" @click="editShow(scope.row)"></el-button>
                 <el-button size="mini" type="danger" icon="el-icon-delete" @click="clearForm(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
        </div>   
    </el-card>
    <!-- 新增商品 -->
    <el-dialog
  :title="!addForm.name ? '添加商品' : '编辑商品'"
  :visible.sync="addGoodsShow"
  width="50%"
  @close='close'
  >
  <el-form ref="addGoodsForm" :model="addForm" label-width="110px" :rules="rules">
     <el-form-item label="商品编号" prop="goods_number">
                 <el-input v-model="addForm.goods_number" type="Number"></el-input>
        </el-form-item>
          <el-form-item label="商品名称" prop="name">
                 <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品类型" prop="type">
                 <el-input v-model="addForm.type"></el-input>
        </el-form-item>
        <el-form-item label="成本价" prop="goods_roucaicbprice">
                 <el-input v-model="addForm.goods_roucaicbprice" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="销售价" prop="goods_roucaisprice">
                 <el-input v-model="addForm.goods_roucaisprice" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="月销量" prop="goods_yxiaoliang">
                 <el-input v-model="addForm.goods_yxiaoliang" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="goods_kucun">
                 <el-input v-model="addForm.goods_kucun" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="总销量" prop="goods_zxiaoliang">
                 <el-input v-model="addForm.goods_zxiaoliang" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="月销量额" prop="goods_yxiaoliangee">
                 <el-input v-model="addForm.goods_yxiaoliangee" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="总销量额" prop="goods_zxiaoliangee">
                 <el-input v-model="addForm.goods_zxiaoliangee" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="参与活动" prop="canyu_active">
                 <el-input v-model="addForm.canyu_active"></el-input>
        </el-form-item>
        <el-form-item label="热销" prop="rxboolean">
                 <el-input v-model="addForm.rxboolean"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
                 <el-input v-model="addForm.state"></el-input>
        </el-form-item>

      </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addGoodsShow = false">取 消</el-button>
    <el-button type="primary" @click="sureAddGoods">确 定</el-button>
  </span>
  </el-dialog>
  <!-- 新增商品 -->
  </div>
</template>

<script>
import '@/mock/zytmock.js'
import { setItem, getItem } from './utils/stroge'
export default {
  name: 'goodsList',
  components: {},
  props: {},
  data () {
    return {
      seletGoodsName: [],
      searchName: '',
        value: '',
        goodList: [],
        params: {
          query: '',
          pagenum: 1,
          pagesize: 5
        },
        total: 0,
        arr: [],
        addGoodsShow: false,
        addForm: {
          goods_number: null,
          name: '',
          type: '',
        goods_roucaicbprice: null,
        goods_roucaisprice: null,
        goods_kucun: null,
        goods_yxiaoliang: null,
        goods_zxiaoliang: null,
        goods_yxiaoliangee: null,
        goods_zxiaoliangee: null,
        canyu_active: '',
        rxboolean: '',
        state: ''
        },
        ysaddForm: {},
        rules: {
          goods_number: { required: true, message: '请输入商品编号', trigger: 'blur'},
          name: { required: true, message: '请输入商品名称', trigger: 'blur'},
          type: { required: true, message: '请输入商品类型', trigger: 'blur'},
          goods_roucaicbprice: { required: true, message: '请输入商品成本价', trigger: 'blur'},
          goods_roucaisprice: { required: true, message: '请输入商品销售价', trigger: 'blur'},
          goods_kucun: { required: true, message: '请输入商品库存', trigger: 'blur'},
          goods_yxiaoliang: { required: true, message: '请输入商品月销量', trigger: 'blur'},
          goods_zxiaoliang: { required: true, message: '请输入商品总销量', trigger: 'blur'},
          goods_yxiaoliangee: { required: true, message: '请输入商品月销售额', trigger: 'blur'},
          goods_zxiaoliangee: { required: true, message: '请输入商品总销售额', trigger: 'blur'},
          canyu_active: { required: true, message: '请输入活动名称', trigger: 'blur'},
          rxboolean: { required: true, message: '请输入商品热销程度', trigger: 'blur'},
          state: { required: true, message: '请输入商品状态', trigger: 'blur'}
        },
        asdasd: []
    }
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.getGoodsList()
  },
  mounted () {
    var left = document.querySelector('.caret-wrapper')
    console.log(left)
  },
  methods: {
    async getGoodsList () {
      this.ysaddForm = this.addForm
      this.seletGoodsName = []
      const { data } = await this.axios.get('/goods',{
        params: this.params
      })
      setItem('goods', data.data)     
      this.goodList = getItem('goods')
      data.data1.list.forEach(item => {   
        const obj = {
          id: item.goods_id,
          type: item.goods_name.type
        }
        this.arr.push(obj)
      })
      const hash = []
      this.arr.forEach(item => {
        if (!hash[item.type]) {
          hash[item.type] = true
          this.seletGoodsName.push(item)
        }
      })
      this.total = data.total
    },
    handleSizeChange (val) {
      this.params.pagesize = val
      if (this.searchName) {
        this.searchGoods()
      } else {
         this.getGoodsList()
      }
    },
    handleCurrentChange (val) {
      this.params.pagenum = val
      if (this.searchName) {
        this.searchGoods()
      } else {
        this.getGoodsList()
      }
    },
    async searchGoods () {
      if (!this.value) {
       return this.$message('请选择商品类型')
      }
      if (!this.searchName) return this.$message('请输入商品名称')
      let type = ''
      this.seletGoodsName.forEach(item => {
        if (item.id === Number(this.value)) {
          type = item.type
        }
      })
      this.params.query = {
        type: type,
        searchName: this.searchName
      }
      const { data } = await this.axios.get('/goods',{
        params: this.params
      })
      this.goodList = data.data
      this.total = data.total1
    },
    resetGoodsList () {
      this.searchName = ''
      this.value = ''
      this.params.query = ''
      this.getGoodsList()
    },
    /* 弹出框处理 */
    sureAddGoods () {
       this.$refs.addGoodsForm.validate(async valid => {
        if (!valid) return false
        if (this.addForm.goods_name) { 
           const ggg = this.goodList.map(item => {
              if (item.goods_id === this.addForm.goods_id) {
                item = this.addForm   
                item.goods_name.name = item.name
                item.goods_name.type = item.type         
              }
               return item
            })      
            this.goodList = ggg
            this.addGoodsShow = false
        } else {
           this.addForm.goods_name = {
          name: this.addForm.name,
          type: this.addForm.type
        }
        const { data } = await this.axios.post('/addGoods', {
            pagenum: this.params.pagenum,
            pagesize: this.params.pagesize,
            content: this.addForm
          })
        setItem('goods', data)
        this.couponList = getItem('goods').params
          this.total = data.total
           this.$message.success('添加成功')
        this.addGoodsShow = false
        }
      })   
    },
    close () {
      const title = document.querySelector('.el-dialog__title')
      if (title.innerText === '添加商品') {
        this.$refs.addGoodsForm.resetFields()
      }   
      this.addForm = JSON.parse(JSON.stringify(this.ysaddForm))
    },
    async clearForm (row) {
     const result = await this.$confirm('此操作将永久删除商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err) => err)
        if (result !== 'confirm') {
          return this.$message('取消了删除')
        }
         await this.axios.delete('/delgoods')
         this.getGoodsList()
    },
    editShow (row) {
        this.goodList.forEach(item => {
        if (item.goods_id === row.goods_id) {
          row.name = item.goods_name.name
          row.type = item.goods_name.type
          return false
        }
      })
      this.addForm = JSON.parse(JSON.stringify(row))
      this.addGoodsShow = true    
    },
    addgoods () {
      this.addGoodsShow = true
    }
  }
}
</script>

<style scoped lang="less">
.good-list{
   .searchBox{
   height: 50px;
   display: flex;
   align-content: center;
   margin-top: 10px;
   border: 1px solid gray;
   border-radius: 5px;
    margin-bottom: 10px;
    /deep/.el-select{
      height: 30px;
      margin-left: 10px;
      .el-input{
        height: 100%;
      }
      .el-input__inner{
        height: 100%;
      }
      .el-input__suffix-inner{
        i{
          height: 39px;
        }
      }
    }
    .el-form{
      height: 100%;
    .el-form-item{
      margin-top: 5px;
      .search{
      margin-left: 100px;
      margin-right: 5px;
    }
    .el-input{
  width: 200px;
  height: 30px;
  /deep/.el-input__inner{
    height: 100%;
  }
    }
    }
  }
 }
 /* */
 .btns{
   display: flex;
   justify-content: space-between;
    .addBtn, .exportBtn{
   width: 100px;
   height: 30px;
   text-align: center;
   line-height: 20px;
     font-size: 13px;
   background-color: rgb(22, 155, 213);
   border: none;
   border-radius: 5px;
   outline: none
 }
 }
 /deep/.caret-wrapper{
   display: none;
 }
}
</style>
